// 提供一个能够显示xtx-message组件的函数

import XtxMessage from "./xtx-message.vue";
import { createVNode, render } from "vue";

// DOM容器
const div = document.createElement('div')
div.setAttribute('class','xtx-message-container')
document.body.appendChild(div)

// 定时器
let timer = null

export default ({ type, text }) => {
    // 1、导入消息组件
    // 2、将消息提示组件编译为虚拟节点(dom节点)
    // createVNode(组件,属性对象(props))
    const vnode = createVNode(XtxMessage, { type, text })
    // 3、准备一个装载消息提示的DOM容器
    // 4、将虚拟节点渲染在容器中
    // render(虚拟节点，DOM容器)
    render(vnode,div)
    // 5、3秒后销毁组件
    clearTimeout(timer)
    timer  =setTimeout(() => {
        render(null,div)
    }, 3000);
}